<el-card style="margin-top: 20px">
    <el-row slot="header">
        <el-col span="5">授权码</el-col>
        <!--        <el-col span="1" offset="17">-->
        <!--            <el-button @click="uploadAuthorizeCodeDialogVisible=true">上传</el-button>-->
        <!--        </el-col>-->
        <el-col span="19" style="text-align: right">
            <el-button @click="generateAuthorizeCodeForm={};generateAuthorizeCodeDialogVisible=true">生成授权码</el-button>
            <el-button @click="exportExcel()">下载</el-button>
        </el-col>

    </el-row>
    <el-row>
        <el-form ref="authorizeCodeForm" :inline="true">
            <el-form-item key="enabled" label="是否启用">
                <el-select v-model="authorizeCodeForm.enabled" clearable>
                    <el-option value="1" label="是"></el-option>
                    <el-option value="0" label="否"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item key="code" label="授权码">
                <el-input v-model="authorizeCodeForm.code"></el-input>
            </el-form-item>
            <el-form-item key="notes" label="备注">
                <el-input v-model="authorizeCodeForm.notes"></el-input>
            </el-form-item>
            <el-form-item key="code" label="创建时间">
                <el-date-picker
                        v-model="authorizeCodeForm.createTime"
                        type="daterange"
                        range-separator="至"
                        value-format="yyyy-MM-dd"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item key="code" label="过期时间">
                <el-date-picker
                        v-model="authorizeCodeForm.expireTime"
                        type="daterange"
                        value-format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
            <el-button type="primary" @click="authorizeCodeForm.pageNumber=1;getAuthorizeCodeData()">查询
            </el-button>
        </el-form>
        <!--        <el-button type="danger" @click="deleteAuthorizeCodeBatch()">删除-->
        <!--        </el-button>-->
    </el-row>
    <el-row style="margin-bottom: 20px">
        <el-button type="danger" @click="disableAuthorizeCodeBatch()">禁用
        </el-button>
        <el-button type="primary" @click="enableAuthorizeCodeBatch()">启用
        </el-button>
    </el-row>
    <el-table :data="authorizeCodeList" style="width: 100%;"
              :header-cell-style="tableHeadClass"
              :cell-style="tableRowClass"
              @selection-change="handleAuthorizeCodeSelectionChange">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column prop="code" label="授权码" width="100px">
            <template slot-scope="scope">
                <el-popover
                        placement="right"
                        title="授权码"
                        width="400"
                        trigger="click"
                        :content="scope.row.code">
                    <el-button slot="reference" type="text">
                        {{scope.row.code==null?"无":scope.row.code.substr(0,10)}}
                    </el-button>
                </el-popover>
            </template>
        </el-table-column>
        <el-table-column prop="notes" label="备注"></el-table-column>
        <el-table-column prop="create_time" label="创建时间" width="200"></el-table-column>
        <el-table-column prop="expire_time" label="过期时间" width="200"></el-table-column>
        <el-table-column prop="enabled" label="是否启用" width="100">
            <template slot-scope="scope">
                <span v-if="scope.row.enabled">
                    是
                </span>
                <span v-else>
                    否
                </span>
            </template>
        </el-table-column>
    </el-table>

    <div style="text-align:center;margin-top:20px;">
        <el-pagination
                @size-change="pageSize=>{authorizeCodeForm.pageSize=pageSize,getAuthorizeCodeData()}"
                @current-change="pageNumber=>{authorizeCodeForm.pageNumber=pageNumber,getAuthorizeCodeData(true)}"
                :current-page="authorizeCodeForm.pageNumber"
                :page-sizes="[100,50,20,10]"
                :page-size="authorizeCodeForm.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="authorizeCodeForm.totalRow"
        ></el-pagination>
    </div>
</el-card>
<el-dialog title="上传" :visible.sync="uploadAuthorizeCodeDialogVisible" :modal-append-to-body="false">
    <el-row>
        <el-row>
            <el-button type="text" @click="window.open('/authorizeCode/uploadTemplate')">文案提交模板</el-button>
        </el-row>
        <el-row style="color: #F56C6C">
            每个sheet为一个主题，主题名为sheet名<br>
            若sheet文件第一行不是给定的格式，则不导入该sheet内容
        </el-row>
        <el-col span="11" style="text-align: left">
            <el-upload
                    :action="'/authorizeCode/upload'"
                    :on-success="uploadAuthorizeCodeSuccess"
                    :on-error="uploadAuthorizeCodeError"
                    accept=".xlsx" :before-upload="beforeUploadAuthorizeCode">
                <el-button type="primary">点击上传</el-button>
            </el-upload>
        </el-col>
    </el-row>
</el-dialog>
<el-dialog title="生成授权码" :visible.sync="generateAuthorizeCodeDialogVisible" :modal-append-to-body="false">
    <el-form ref="form" :model="generateAuthorizeCodeForm" label-width="80px">
        <el-form-item label="备注">
            <el-input v-model="generateAuthorizeCodeForm.notes"></el-input>
        </el-form-item>
        <el-form-item label="活动时间">
            <el-date-picker type="date" placeholder="过期时间" v-model="generateAuthorizeCodeForm.expireTime"
                            style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item label="数量">
            <el-input-number v-model="generateAuthorizeCodeForm.num" :min="1"></el-input-number>
        </el-form-item>
        <div style="text-align: right">
            <el-button @click="submitGenerateAuthorizeCode">提交</el-button>
        </div>
    </el-form>
</el-dialog>
<el-dialog title="授权码生成结果" :visible.sync="recentGenerateCodeDialogVisible" :modal-append-to-body="false" width="70%">
    <el-table :data="recentGenerateCodeList" style="width: 100%;"
              :header-cell-style="tableHeadClass"
              :cell-style="tableRowClass">
        <el-table-column prop="code" label="授权码">
        </el-table-column>
    </el-table>
</el-dialog>
